<template>
  <div class="departments">
    <el-card class="box-card">
      <el-tabs v-model="activeName">
        <el-tab-pane label="组织结构" name="first">
          <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="6">
              <h4 class="el-icon-delete-solid">
                江苏传智播客教育科技股份有限公司
              </h4>
            </el-col>
            <el-col class="right-col" :span="6">
              <span class="leader">负责人</span>
              <!-- 下拉菜单 -->
              <el-dropdown>
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <el-button
                      type="text"
                      @click="dialogFormVisible = true"
                    >添加子部门</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
          <el-divider />
          <!-- tree -->
          <el-tree
            :data="departs"
            :props="defaultProps"
            @node-click="handleNodeClick"
          >
            <template #default="{ data }">
              <el-row class="tree-row" type="flex" justify="space-between">
                <el-col :span="6">{{ data.name }}</el-col>
                <el-col class="right-col" :span="6">
                  <span class="leader">{{ data.manager }} </span>
                  <!-- 下拉菜单 -->
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      操作<i class="el-icon-arrow-down el-icon--right" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>
                        <el-button
                          type="text"
                          @click="addMangers(data)"
                        >添加子部门</el-button>
                      </el-dropdown-item>
                      <el-dropdown-item>
                        <el-button
                          type="text"
                          @click="enterEdit(data)"
                        >查看部门</el-button>
                      </el-dropdown-item>
                      <el-dropdown-item>
                        <el-button
                          type="text"
                          @click="deleteMangers(data)"
                        >删除部门</el-button>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </template>
          </el-tree>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- Form -->
    <dep-dialog
      :visible.sync="dialogFormVisible"
      :form="form"
      @getData="getData"
      @cancel="anCancel"
    />
  </div>
</template>

<script>
import {
  getDepartments,
  getDepartmentById,
  deleteDepartment
} from '@/api/departments'

import DepDialog from './components/DepDialog.vue'
// 转树的方法
function formatData(list, pid) {
  // 返回给外部的是顶级的节点
  return list.filter((v) => {
    if (v.pid === pid) {
      // 第二层
      v.children = formatData(list, v.id)
      return true
    } else {
      return false
    }
  })
}

export default {
  name: 'Departments',
  components: { DepDialog },

  data() {
    return {
      // 部门负责人数组
      managers: [],
      // 是否显示弹框
      dialogFormVisible: false,
      form: {
        code: '',
        introduce: '',
        manager: '',
        name: '',
        pid: ''
      },

      activeName: 'first',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      departs: [
        {
          name: '总裁办',
          manager: '曹操',
          children: [{ name: '董事会', manager: '曹丕' }]
        },
        { name: '行政部', manager: '刘备' },
        { name: '人事部', manager: '孙权' }
      ]
    }
  },
  async created() {
    this.getData()
  },
  methods: {
    async deleteMangers(data) {
      // console.log(data)
      this.$confirm('是否退出删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(async() => {
          const res = deleteDepartment(data.id)
          this.$message({
            type: 'success',
            message: '已删除!'
          })
          this.getData()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })

      // console.log(res)
    },
    async enterEdit(data) {
      // console.log(data)
      const res = await getDepartmentById(data.id)
      // console.log(res)
      this.form = { ...res }
      // console.log(this.form)
      this.dialogFormVisible = true
    },
    // 清空表单中的数据
    anCancel() {
      this.form = {
        code: '',
        introduce: '',
        manager: '',
        name: '',
        pid: ''
      }
      this.dialogFormVisible = false
    },
    addMangers(data) {
      this.form.pid = data.id
      this.dialogFormVisible = true
    },

    handleNodeClick(data) {
      // console.log(data)
    },
    async getData() {
      const res = await getDepartments()
      // 递归转树 函数
      console.log(res)
      this.departs = formatData(res.depts, '')
      // const res = await getDepartments()
      // // console.log(res)
      // const res1 = res.depts.filter((v) => v.pid !== '-1')
      // // console.log(res1)
      // const root = res1.filter((v) => v.pid === '')
      // // console.log(root)
      // root.forEach((v) => {
      //   v.children = res1.filter((vc) => vc.pid === v.id)
      // })
      // this.departs = root
    }
    // 提交表单
    // submitForm() {
    //   this.$refs.form.validate(async(valid) => {
    //     if (valid) {
    //       // console.log(valid)
    //       //  如果有id就走编辑
    //       // console.log(this.form.id)
    //       if (this.form.id) {
    //         const res = editDepartment(this.form)
    //         // console.log(res)
    //         this.$message.success('修改成功')
    //       } else {
    //         const res = addDepartments(this.form)
    //         this.$message.success('新增成功')
    //       }
    //       // console.log(this.form)

    //       // console.log(res)

    //       this.dialogFormVisible = false
    //       this.anCancel()
    //       this.getData()

    //     } else {
    //       this.$message.error('数据有误,请检查')
    //       return false
    //     }
    //   })
    // },
  }
}
</script>

<style lang="scss" scoped>
.departments {
  .el-tabs__content {
    padding: 20px, 40px, 40px;
    // .el-tab-pane {
    //   padding: 50px 100px;
    // }
    h4 {
      margin: 0;
    }
    .right-col {
      text-align: right;
    }
    .leader {
      font-size: 14px;
      margin-right: 10px;
    }
    // .el-divider--horizontal {
    //   width: 85%;
    //   margin-top: 10px;
    // }
    .el-tree-node__content {
      // width: 100%;
      // display: block;
      .tree-row {
        flex: 1;
      }
    }
  }
}
</style>
